<template>
  <div style="display: flex;flex-direction: column;gap: 10px">
    <t-row :gutter="[16, 16]">
      <t-col :xs="12" :xl="12">
        <t-card title="用户登录总数"  class="dashboard-chart-card">
          <template #actions>
            <t-space>
              <t-radio-group v-model="queryParams.dateType1" @change="(val)=>{loginDataGetMapByDate()}"  default-value="2">
                <t-radio-button value="1">日</t-radio-button>
                <t-radio-button value="2">周</t-radio-button>
                <t-radio-button value="3">月</t-radio-button>
              </t-radio-group>
              <t-date-range-picker @change="(val)=>{queryParams.dateType1='';loginDataGetMapByDate()}"  :placeholder="['开始时间','结束时间']" v-model="queryParams.dateRange1"  allow-input clearable/>
            </t-space>

          </template>
          <chart-view :chartOption="chartOpt1" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>

    </t-row>
    <t-row :gutter="[16, 16]">
      <t-col :xs="12" :xl="12">
        <t-card title="某种业务数量"  class="dashboard-chart-card">
          <template #actions>
            <t-space>
              <t-radio-group v-model="queryParams.dateType2" @change="(val)=>{businessDataGetMapByDate()}"  default-value="2">
                <t-radio-button value="1">日</t-radio-button>
                <t-radio-button value="2">周</t-radio-button>
                <t-radio-button value="3">月</t-radio-button>
              </t-radio-group>
              <t-date-range-picker @change="(val)=>{queryParams.dateType2='';businessDataGetMapByDate()}"  :placeholder="['开始时间','结束时间']" v-model="queryParams.dateRange2"  allow-input clearable/>
              <t-input placeholder="业务类型" v-model="queryParams.businessType" @change="(val)=>{businessDataGetMapByDate()}" clearable></t-input>
            </t-space>
          </template>
          <chart-view :chartOption="chartOpt2" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
    </t-row>
    <t-row :gutter="[16, 16]">
      <t-col :xs="12" :xl="12">
        <t-card title="某种信息数量"  class="dashboard-chart-card">
          <template #actions>
            <t-space>
              <t-radio-group v-model="queryParams.dateType3" @change="(val)=>{monitorDataGetMapByDate()}"  default-value="2">
                <t-radio-button value="1">日</t-radio-button>
                <t-radio-button value="2">周</t-radio-button>
                <t-radio-button value="3">月</t-radio-button>
              </t-radio-group>
              <t-date-range-picker @change="(val)=>{queryParams.dateType3='';monitorDataGetMapByDate()}" :placeholder="['开始时间','结束时间']" v-model="queryParams.dateRange3"  allow-input clearable/>
              <t-input placeholder="信息类型" v-model="queryParams.infoType" @change="(val)=>{monitorDataGetMapByDate()}" clearable></t-input>
            </t-space>

          </template>
          <chart-view :chartOption="chartOpt3" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
    </t-row>
    <t-row :gutter="[16, 16]">
      <t-col :xs="12" :xl="12">
        <t-card title="某种监测数据"  class="dashboard-chart-card">
          <template #actions>
            <t-space>
              <t-radio-group v-model="queryParams.dateType4" @change="(val)=>{infoDataGetMapByDate()}"  default-value="2">
                <t-radio-button value="1">日</t-radio-button>
                <t-radio-button value="2">周</t-radio-button>
                <t-radio-button value="3">月</t-radio-button>
              </t-radio-group>
              <t-date-range-picker @change="(val)=>{queryParams.dateType4='';infoDataGetMapByDate()}" :placeholder="['开始时间','结束时间']" v-model="queryParams.dateRange4"  allow-input clearable/>
              <t-input placeholder="监测类型" v-model="queryParams.monitorType" @change="(val)=>{infoDataGetMapByDate()}" clearable></t-input>
            </t-space>


          </template>
          <chart-view :chartOption="chartOpt4" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
    </t-row>
    <t-row :gutter="[16, 16]">
      <t-col :xs="12" :xl="12">
        <t-card title="某种事务数据"  class="dashboard-chart-card">
          <template #actions>
           <t-space>
             <t-radio-group v-model="queryParams.dateType5"  @change="(val)=>{transactionDataGetMapByDate()}" default-value="2">
               <t-radio-button value="1">日</t-radio-button>
               <t-radio-button value="2">周</t-radio-button>
               <t-radio-button value="3">月</t-radio-button>
             </t-radio-group>
             <t-date-range-picker @change="(val)=>{queryParams.dateType5='';transactionDataGetMapByDate()}"  :placeholder="['开始时间','结束时间']" v-model="queryParams.dateRange5"  allow-input clearable/>
             <t-input placeholder="事务类型" v-model="queryParams.transactionType" @change="(val)=>{transactionDataGetMapByDate()}" clearable></t-input>

           </t-space>

          </template>
          <chart-view :chartOption="chartOpt5" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
    </t-row>

  </div>
</template>

<script>
export default {
  name: "system-analysis",
  data() {
    return {
      allCount: 0,
      chartOpt1: {},
      chartOpt2: {},
      chartOpt3: {},
      chartOpt4: {},
      chartOpt5: {},
      queryParams:{
        systemCode: '',
        dateType1: '2',
        dateType2: '2',
        dateType3: '2',
        dateType4: '2',
        dateType5: '2',
        dateType6: '2',
        startDate: '',
        endDate: '',
        dateRange1: [],
        dateRange2: [],
        dateRange3: [],
        dateRange4: [],
        dateRange5: [],
        businessType: '',
        infoType: '',
        monitorType: '',
        transactionType: '',
      }
    }
  },
  created() {
    const taskId = this.$route.params && this.$route.params.taskId;
    if (!taskId) {
      this.$message.error("任务id丢失");
      return false;
    }
    this.queryParams.systemCode = taskId;
    this.loginDataGetMapByDate();
    this.businessDataGetMapByDate();
    this.infoDataGetMapByDate();
    this.monitorDataGetMapByDate();
    this.transactionDataGetMapByDate();
  },
  methods: {
    loginDataGetMapByDate(){
      this.queryParams.dateType = this.queryParams.dateType1;
      [this.queryParams.startDate, this.queryParams.endDate] = this.queryParams.dateRange1;
      this.$api.yxjk.system.loginDataGetMapByDate(this.queryParams).then(response => {
        this.chartOpt1 = this.$eChartFn.getLineChart(Object.keys(response.data),Object.values(response.data));
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    businessDataGetMapByDate(){
      this.queryParams.dateType = this.queryParams.dateType2;
      [this.queryParams.startDate, this.queryParams.endDate] = this.queryParams.dateRange2;
      this.$api.yxjk.system.businessDataGetMapByDate(this.queryParams).then(response => {
        this.chartOpt2 = this.$eChartFn.getLineChart(Object.keys(response.data),Object.values(response.data));
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    infoDataGetMapByDate(){
      this.queryParams.dateType = this.queryParams.dateType4;
      [this.queryParams.startDate, this.queryParams.endDate] = this.queryParams.dateRange4;
      this.$api.yxjk.system.infoDataGetMapByDate(this.queryParams).then(response => {
        this.chartOpt4 = this.$eChartFn.getLineChart(Object.keys(response.data),Object.values(response.data));
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    monitorDataGetMapByDate(){
      this.queryParams.dateType = this.queryParams.dateType3;
      [this.queryParams.startDate, this.queryParams.endDate] = this.queryParams.dateRange3;
      this.$api.yxjk.system.monitorDataGetMapByDate(this.queryParams).then(response => {
        this.chartOpt3 = this.$eChartFn.getLineChart(Object.keys(response.data),Object.values(response.data));
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    transactionDataGetMapByDate(){
      this.queryParams.dateType = this.queryParams.dateType5;
      [this.queryParams.startDate, this.queryParams.endDate] = this.queryParams.dateRange5;
      this.$api.yxjk.system.transactionDataGetMapByDate(this.queryParams).then(response => {
        this.chartOpt5 = this.$eChartFn.getLineChart(Object.keys(response.data),Object.values(response.data));
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
  }
}
</script>

<style lang="less" scoped>
.card{
  border: 1px solid var(--td-component-border);
  border-radius: var(--td-radius-medium);
  background-color: var(--td-bg-color-container);
  padding: 10px 10px;
  .header{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 10px;
    position: relative;
    .title{
      font: var(--td-font-title-medium);
      color: var(--td-text-color-primary);
      margin-right: var(--td-comp-margin-l);
      word-break: break-all;
    }
  }
}

@import '@/style/variables.less';
.dashboard-rank-card{
  height: 100%;
}
.dashboard-rank__cell {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  background-color: @gray-color-5;
  align-items: center;
  justify-content: center;
  font-weight: 700;

  &--top {
    background: @brand-color;
  }
}
</style>
